import TriggerWay from '@/components/TriggerWay';
import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
import { Button } from 'antd';
import React from 'react';
type CreateFormProps = {
  onCancel: () => void;
  onSubmit: (values: Record<string, any>) => void;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { onCancel, onSubmit } = props;
  const onOpenChange = (open: boolean) => {};

  const onFinish = async (values: Record<string, any>) => {
    onSubmit(values);
    // run(values);
  };
  return (
    <ModalForm
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新建
        </Button>
      }
      onOpenChange={(open: boolean) => onOpenChange(open)}
      onFinish={async (values: any) => {
        console.log(values);
        onFinish(values);
        // message.success('提交成功');
        // 返回true 则关闭
        return true;
      }}
      initialValues={{
        title: 1,
      }}
    >
      <ProFormText
        label="名称"
        name="title"
        rules={[
          {
            required: true,
            message: '请输入名称',
          },
        ]}
        placeholder="请输入名称"
      />
      {/* name={['trigger', 'type']} 这种写法 相当于 trigger.type */}
      <ProForm.Item
        label={'触发方式'}
        name={['type']}
        rules={[{ required: true, message: '请选择触发方式' }]}
        initialValue={'device'}
      >
        {/* 注意此处没有传递任何参数,但是作为 ProForm.Item的子组件渲染,会将自身的属性传递给TriggerWay */}
        <TriggerWay></TriggerWay>
      </ProForm.Item>
    </ModalForm>
  );
};

export default CreateForm;
